<template>
  <div>
    <!-- 加班报表 -->
    <div class="app-container">
      <div class="filter-container">
        <el-input
          v-model="listQuery.person_id"
          :placeholder="$t('table.worker_id')"
          style="width: 200px;"
          clearable
          @change="handleFilter"
        />
        <el-input
          v-model="listQuery.name"
          :placeholder="$t('table.worker_name')"
          style="width: 200px;"
          clearable
          @change="handleFilter"
        />
        <el-date-picker
          v-model="listQuery.time"
          :start-placeholder="$t('table.start_time')"
          :end-placeholder="$t('table.end_time')"
          type="datetimerange"
          value-format="yyyy-MM-dd"
          range-separator="一"
          format="yyyy-MM-dd"
          @change="handleFiltertime"
        />
        <el-button type="primary" size="small" @click="getLists">{{
          $t("table.search")
        }}</el-button>
        <el-button type="primary" size="small" @click="getExcel">{{
          $t("table.export")
        }}</el-button>
        <el-button
          v-if="
            overtime == true
              ? (summaryname = $t('table.view_summary'))
              : (summaryname = $t('table.view_overtime_report'))
          "
          type="primary"
          size="small"
          @click="gotoSummary"
        >{{ summaryname }}</el-button
        >
        <summary />
      </div>

      <div v-if="overtime">
        <div style="margin-bottom:10px;font-size:16px;margin-left:20px">
          {{ $t("menu.overtime_report") }}：
        </div>
        <el-table
          v-loading="listLoading"
          :data="list"
          :header-cell-style="{
            background: '#f2f2f2',
            color: '#606266',
            height: '10px',
            padding: '5px'
          }"
          :row-style="{ height: '40px', padding: '0px' }"
          :cell-style="{ padding: '0px' }"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          height="637px"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column :label="$t('table.worker_id')" align="center">
            <template slot-scope="scope">
              {{ scope.row.person_id }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.worker_name')" align="center">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.company')" align="center">
            <template slot-scope="scope">
              {{ scope.row.company }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.department')" align="center">
            <template slot-scope="scope">
              {{ scope.row.department }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.attendance_date')" align="center">
            <template slot-scope="scope">
              {{ scope.row.day }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.worktime_period')" align="center">
            <template slot-scope="scope">
              {{ scope.row.overtime_name }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.check_time')" align="center">
            <template slot-scope="scope">
              {{ scope.row.check_time }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.check_out_time')" align="center">
            <template slot-scope="scope">
              {{ scope.row.leave_time }}
            </template>
          </el-table-column>
          <!-- <el-table-column :label="$t('table.plan_overtime')" align="center">
            <template slot-scope="scope">
              {{ scope.row.overtime }}
            </template>
          </el-table-column> -->
          <el-table-column :label="$t('table.real_overtime')" align="center">
            <template slot-scope="scope">
              {{ scope.row.overtime }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.remark')" align="center">
            <template slot-scope="scope">
              {{ scope.row.desc }}
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            :current-page="current_page"
            :page-sizes="[10, 50, 100]"
            :page-size="per_page"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <!-- 加班汇总表 -->
    <div v-if="summary" class="summyif">
      <div
        style="margin-bottom:10px;font-size:16px;margin-left:20px;margin-top:-20px"
      >
        {{ $t("table.summary") }}:
      </div>
      <el-table
        v-loading="listLoadingtow"
        :data="WorkOvertime"
        :header-cell-style="{
          background: '#f2f2f2',
          color: '#606266',
          height: '10px',
          padding: '5px'
        }"
        :row-style="{ height: '40px', padding: '0px' }"
        :cell-style="{ padding: '0px' }"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        height="637px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column :label="$t('table.worker_id')" align="center">
          <template slot-scope="scope">
            {{ scope.row.person_id }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.worker_name')" align="center">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.company')" align="center">
          <template slot-scope="scope">
            {{ scope.row.company }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.department')" align="center">
          <template slot-scope="scope">
            {{ scope.row.department }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.total_attendance')" align="center">
          <template slot-scope="scope">
            {{ scope.row.overtime_total }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.over_time')" align="center">
          <template slot-scope="scope">
            {{ scope.row.overtime }}
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          :current-page="current_pageone"
          :page-sizes="[10, 50, 100]"
          :page-size="per_pageone"
          :total="totalone"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import store from '@/store'
import {
  employee_attendance_interval_get_list,
  service_summaryAll
} from '@/api/StatisticalReports/StatisticalReports'

export default {
  components: {},
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      is_late: this.$t('table.late'),
      LeaveEarly: this.$t('table.leave_early'),
      BeLateAndLeave: this.$t('table.beLateAndLeave'),
      Normal: this.$t('table.normal'),
      listData: null,
      parseTime: null,
      summaryname: '',
      summary: false,
      overtime: true,
      list: [],
      listLoading: true,
      listLoadingtow: true,
      total: null,
      multipleSelection: [],
      current_page: null,
      last_page: null,
      per_page: null,
      totalone: null,
      current_pageone: null,
      last_pageone: null,
      per_pageone: null,
      listQuery: {
        beginTime: undefined,
        endTime: undefined,
        name: undefined,
        time: [],
        person_id: undefined,
        page: 1,
        pagesize: 10,
        ov: 1
      },
      WorkOvertime: []
    }
  },
  created() {
    this.getLists()
    const timestamp = new Date().getTime()
    this.listQuery.beginTime = this.time(timestamp - 2592000000)
    this.listQuery.endTime = this.time(timestamp)
    this.listQuery.time[0] = this.listQuery.beginTime
    this.listQuery.time[1] = this.listQuery.endTime
    console.log(this.time(timestamp), 'tttttttttttttttttt')
  },
  methods: {
    time(time) {
      var date = new Date(time + 8 * 3600 * 1000)
      return date
        .toJSON()
        .substr(0, 10)
        .replace('T', ' ')
        .replace(/-/g, '-')
    },
    gotoSummary() {
      this.listLoadingtow = true 
      this.summary = !this.summary
      this.overtime = !this.overtime
      if (this.overtime == false) {
        // 加班汇总数据
        service_summaryAll(store.getters.token, this.listQuery).then(res => {
          console.log(res, '加班汇总数据=============')
          this.WorkOvertime = res.data.data.data
          this.current_pageone = res.data.data.current_page
          this.per_pageone = res.data.data.per_page
          this.last_pageone = res.data.data.last_page
          this.totalone = res.data.data.total
           this.listLoadingtow = false 
        })
      }
    },
    // 获取展示列表数据
    getLists() {
      this.listLoading = true
      // 加班报表数据
      employee_attendance_interval_get_list(
        store.getters.token,
        this.listQuery
      ).then(res => {
        this.list = res.data.list.data
        this.current_page = res.data.list.current_page
        this.per_page = res.data.list.per_page
        this.last_page = res.data.list.last_page
        this.total = res.data.list.total
        console.log(res.data)
         this.listLoading = false

        //   this.listData.forEach(item => {
        //     //  var data =  this.listData.filter(itemde => itemde.overtime_id == null)[0]
        //     //  console.log(data,'data')
        //     // console.log(item.overtime_id,'item.overtime_id')
        //     if(item.overtime_id != null){
        //       this.list.push(item)
        //       console.log(this.list,'this.list')
        //     }
        // });
      })
    },
    // 分页相关方法
    handleFilter() {
      this.listQuery.page = 1
      this.getLists()
    },
    handleFiltertime(val) {
      this.listQuery.beginTime = val[0]
      this.listQuery.endTime = val[1]
      this.getLists()
    },
    handleSizeChange(val) {
      this.listQuery.pagesize = val
      this.getLists()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getLists()
    },
    handleSelectionChange(val) {
      console.log(val, 'oooooooooooooooooooooo')
      this.multipleSelection = []
      val.forEach(item => {
        this.multipleSelection.push(item.device_id)
      })
    },

    // 导出报表
    getExcel() {
      if (this.overtime == true) {
        // 当前时间
        const date = new Date() // 时间戳为10位需乘1000，为13位则不用
        const Y = date.getFullYear() // 年
        const M =
          date.getMonth() + 1 < 10
            ? '0' + (date.getMonth() + 1)
            : date.getMonth() + 1 // 月
        const D =
          date.getDate() < 10 ? '0' + date.getDate() + '' : date.getDate()
        const date_time = Y + '-' + M + '-' + D
        employee_attendance_interval_get_list(
          store.getters.token,
          this.listQuery
        ).then(res => {
          console.log(res, '222222222222')
          this.export = res.data.list.data
          import('@/vendor/Export2Excel').then(excel => {
            const tHeader = [
              this.$t('table.worker_id'),
              this.$t('table.worker_name'),
              this.$t('table.company'),
              this.$t('table.department'),
              this.$t('table.attendance_date'),
              this.$t('table.check_time'),
              this.$t('table.check_out_time'),
              this.$t('table.over_time'),
              this.$t('table.remark')
            ]
            // '工号',
            // '姓名',
            // '公司',
            // '部门',
            // '考勤日期',
            // '签到时间',
            // '签退时间',
            // '考勤状态',
            // '时长(分钟)',
            // '备注'
            const filterVal = [
              'person_id',
              'name',
              'company',
              'department',
              'day',
              'check_time',
              'leave_time',
              'overtime',
              'desc'
            ]
            const list = res.data.list.data
            const data = this.formatJson(filterVal, list)
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: this.$t('menu.overtime_report') + ' ' + date_time,
              autoWidth: true,
              bookType: 'xlsx'
            })
          })
        })
      } else {
        // 汇总数据
        // 当前时间
        const date = new Date() // 时间戳为10位需乘1000，为13位则不用
        const Y = date.getFullYear() // 年
        const M =
          date.getMonth() + 1 < 10
            ? '0' + (date.getMonth() + 1)
            : date.getMonth() + 1 // 月
        const D =
          date.getDate() < 10 ? '0' + date.getDate() + '' : date.getDate()
        const date_time = Y + '-' + M + '-' + D
        service_summaryAll(store.getters.token).then(res => {
          console.log(res, '222222222222')
          this.export = res.data.data.data
          import('@/vendor/Export2Excel').then(excel => {
            const tHeader = [
              this.$t('table.worker_id'),
              this.$t('table.worker_name'),
              this.$t('table.company'),
              this.$t('table.department'),
              this.$t('table.over_total'),
              this.$t('table.over_time')
            ]
            // "工号",
            // "姓名",
            // "公司",
            // "部门",
            // "加班次数(次)",
            // "加班时长(分钟)",
            const filterVal = [
              'person_id',
              'name',
              'company',
              'department',
              'overtime_total',
              'overtime'
            ]
            const list = res.data.data.data
            const data = this.formatJson(filterVal, list)
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename:
                this.$t('menu.overtime_report') +
                ' ' +
                this.$t('table.summary') +
                ' ' +
                date_time,
              autoWidth: true,
              bookType: 'xlsx'
            })
          })
        })
      }
      this.listLoading = false
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    }
  }
}
</script>

<style></style>

<style scoped>
.pagination-container {
  margin-top: 10px;
}
.app-container {
  border-top: #eee solid 10px;
}

.summyif {
  margin: 0 30px 0px 20px;
}
.pagination-container {
  margin-top: 25px;
}
</style>
